{% extends "base.html" %}

{% load comment_tags %}

{% block main %}
    <div class="container">

        <div class="my-3 p-3 bg-white rounded box-shadow">
            <div class="row">
                <div class="col-md-2">
                    <div class="card bg-dark text-white d-none d-md-block">
                      <img class="card-img" src="{{ book.cover_picture.url }}" alt="Card image">
                    </div>
                </div>
                <div class="col-md-10">
                    <div class="d-flex flex-column">
                      <div class="p-1"> <span class="text-danger">书名:</span> <span class="ml-2 text-success">{{ book.name }}</span> </div>
                      <div class="p-1 d-none d-md-block">
                          <span class="text-danger">简介:</span> <span class="ml-2 text-success">{{ book.desc }}</span>
                      </div>
                      <!--小屏幕显示模块-->
                      <div class="p-1 d-block d-sm-none">
                          <a class="text-danger" href="#description" data-toggle="collapse" aria-expanded="false" aria-controls="description">点击显示简介</a>
                      </div>
                      <div class="p-1 collapse" id="description">
                          <div class="card card-body">
                              {{ book.desc }}
                          </div>
                      </div>
                        <div class="p-1"> <span class="text-danger">上传者:</span> <a href="{{ book.upload_user.get_absolute_url }}"><span class="ml-2 text-success">{{ book.upload_user }}</span></a> </div>

                        <!--小屏幕显示模块结束-->
                    </div>
                </div>
            </div>
        </div>

        <div class="nav-scroller bg-white box-shadow" id="recent">
            <nav class="nav nav-underline container" >
                <a class="nav-link" href="#comment-form-0" data-toggle="collapse" aria-expanded="false" aria-controls="comment-form">
                   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 写书评</a>
               <a class="nav-link {% ifequal 'recent' data %}active text-success{% endifequal %}" href="?data=recent">
                   <i class="fa fa-comment-o" aria-hidden="true"></i> 最新书评</a>
               <a class="nav-link {% ifequal 'hot' data %}active text-success{% endifequal %}" href="?data=hot">
                   <i class="fa fa-comments-o" aria-hidden="true"></i> 热门书评</a>

               <a class="nav-link" href="{% url 'books:preview_pdf' book.id %}"><i class="fa fa-eye" aria-hidden="true"></i> 预览</a>
                {% if request.user.is_authenticated %}
                     <a class="nav-link" href="{{ book.pdf.url }}" target="_blank" download="" data-id="274" title="">
                         <i class="fa fa-download" aria-hidden="true"></i> 下载</a>
                {% else %}
                     <a class="nav-link" href="{% url 'users:user_login' %}"><i class="fa fa-sign-in" aria-hidden="true"></i> 登录（下载）</a>
                {% endif %}
            </nav>
        </div>

        <!-- comment form -->
        <div class="my-3 p-3 bg-white rounded box-shadow collapse clearfix" id="comment-form-0">
            <form>
                <div class="form-group">
                    <textarea class="form-control" id="message-text-0" data-login="{% if not request.user.is_authenticated %}un{% endif %}login" placeholder="写下你的评论..."></textarea>
                </div>
                <button type="button" class="btn btn-sm btn-outline-success float-right " onclick="submitComment({{ book.id }}, 0)">发 送</button>
                <button type="button" class="btn btn-sm btn-outline-secondary float-right mr-3" href="#comment-form-0" data-toggle="collapse" aria-expanded="false" aria-controls="comment-form">取消</button>
            </form>
        </div>

        <!-- book recent comments data-->
         <div class="my-3 p-3 bg-white rounded box-shadow">
             <h6 class="border-bottom border-gray pb-2 mb-0" id="comment-info">
                {{ info }}书评(<span id="comment-count">{{ comment_count }}</span>)
             </h6>

             <div id="comment-list">
                {% for comment in comments %}
                    {% include 'comment-item.html' %}
                {% endfor %}
            </div>

            <!-- fake comment -->
            <div class="media text-muted pt-3">
              <img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
              <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <strong class="d-block text-gray-dark">@username</strong>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
              </p>
            </div>
            <div class="media text-muted pt-3">
              <img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
              <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <strong class="d-block text-gray-dark">@username</strong>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
              </p>
            </div>
            <div class="media text-muted pt-3">
              <img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
              <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
                <strong class="d-block text-gray-dark">@username</strong>
                Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
              </p>
            </div>
        </div>
    </div>
{% endblock %}